<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button size="small" type="primary" @click="handlePageCreateClicked">新增</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      :childrenColumnName="null"
      rowKey="code"
      :columns="columns"
      :dataSource="list"
      :pagination="false">
      <span slot="idx" slot-scope="value,row,index">
        {{ index+1 }}
      </span>
      <span slot="dataScope" slot-scope="value,row">
        {{ dataScopeMap[value] || '-' }}
      </span>
      <span slot="buttons" slot-scope="value,row,index">

        <a-popover v-for="(button,bidx) in row.children"
                   :key="button.code"
                   :title="'按钮：'+button.name">
          <template slot="content">
            <detail-list size="small" :col="1" style="width: 300px;">
              <detail-list-item term="模块标签">{{button.tag}}</detail-list-item>
              <detail-list-item term="功能名称">{{button.name}}</detail-list-item>
              <detail-list-item term="代码">{{button.code}}</detail-list-item>
              <detail-list-item term="排序号"><a>{{button.order}}</a></detail-list-item>
            </detail-list>
          </template>
          <a-tag :visible="button.visible"
                 color="blue"
                 closable
                 @close="handleButtonDeleteClicked(row,button,bidx)"
            >
            {{button.name}}
          </a-tag>
        </a-popover>
        <a @click.prevent="handleButtonCreateClicked(row,index)"
           style="font-size: 22px;"
           color="blue"
           type="link">+</a>
      </span>
      <span slot="updated" slot-scope="value,row">
          {{ row.updated | fromNow }}
      </span>
      <span slot="action" slot-scope="text, row, index">
          <a @click.prevent="handlePageEditClicked(row,index)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="是否要删除此行？" @confirm="handleClickDelete(row,index)">
            <a @click.stop>删除</a>
          </a-popconfirm>
        </span>
    </a-table>

    <page-create-modal ref="pageCreateModal" @success="handlePageCreateSuccess"></page-create-modal>
    <page-edit-modal ref="pageEditModal" @success="handlePageEditSuccess"></page-edit-modal>
    <button-create-modal ref="buttonCreateModal" @success="handleButtonCreateSuccess"></button-create-modal>

  </div>
</template>

<script>

  import {deletePage, findPages, deleteButton} from "@/api/view";
  import PageCreateModal from "./PageCreateModal";
  import PageEditModal from "./PageEditModal";
  import ButtonCreateModal from "./ButtonCreateModal";
  import DetailList from '@/components/tools/DetailList'
  const DetailListItem = DetailList.Item

  const columns = [{
    title: '序号',
    dataIndex: 'idx',
    key: 'idx',
    scopedSlots: {customRender: 'idx'}
  }, {
    title: '模块标签',
    dataIndex: 'tag',
    key: 'tag'
  }, {
    title: '功能名称',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '代码',
    dataIndex: 'code',
    key: 'code'
  }, {
    title: '排序号',
    dataIndex: 'order',
    key: 'order'
  }, {
    title: '包含按钮',
    dataIndex: 'buttons',
    key: 'buttons',
    scopedSlots: {customRender: 'buttons'}
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'}
  }]


  export default {

    name: 'ViewList',

    components: {
      PageCreateModal,
      PageEditModal,
      ButtonCreateModal,
      DetailList,
      DetailListItem
    },

    data() {
      return {
        columns,
        list: []
      }
    },

    created() {
      this.queryData()
    },

    methods: {

      queryData() {
        findPages().then(resp => {
          resp.result.list.forEach(row=>{
            row.children.forEach(button=>{
              button.visible = true
            })
          })
          this.list = resp.result.list
        })
      },

      handlePageCreateClicked(row, index) {
        this.$refs.pageCreateModal.open()
      },

      handlePageCreateSuccess(newRow) {
        this.list.push(newRow)
      },

      handlePageEditClicked(row, index) {
        this.$refs.pageEditModal.open(row, index)
      },

      handlePageEditSuccess(newRow, index) {
        this.list.splice(index, 1, newRow)
      },

      handleButtonCreateClicked(row, index) {
        this.$refs.buttonCreateModal.open(row, index)
      },

      handleButtonCreateSuccess(newButton,rowIndex) {
        let row = this.list[rowIndex]
        row.children.push(newButton)
        this.list.splice(rowIndex,1,row)
      },

      handleButtonDeleteClicked(row,button,bidx){
        deleteButton(button.code).then(()=>{
          this.$message.warn('删除按钮元数据成功')
          button.visible = false
          row.children.splice(bidx,1)
        }).catch(()=>{
          button.visible = true
        })
      },

      handleClickDelete(row, index) {
        deletePage(row.code).then(() => {
          this.list.splice(index, 1)
          this.total -= 1
          this.$message.warn('删除功能元数据成功')
        })
      },

    }

  }
</script>

<style lang="less" scoped>
</style>
